<template>
  <div class="bg-weather-secondary">
    <div class="weather">
      <div 
        class="item"
        v-for="(value, index) in weatherList"
        :key="index"
      >
        <span>{{ getWeekLabel(index, value.week) }}</span>
        <span>{{ value.date.slice(5) }}</span>
        <span>{{ value.dayweather }}</span>
        <span>风力 {{ value.daypower }}级</span>
      </div>
    </div>
    <div class="chart-box">
      <v-chart class="chart" :option="option"/>
    </div>
  </div>
</template>
<script setup>
import {ref, computed} from 'vue';

// 引入天气 store
import { useWeatherStore } from '@/store';  
const weatherStore = useWeatherStore();

// 当地城市预测天气
const localForecast = computed(() => weatherStore.forecastLocalCity || []);
// 当地白昼温度数组
const localDayTemp = computed(() => localForecast.value.map(item => Number(item?.daytemp || 0)));
// console.log('localDayTemp', localDayTemp.value);
// 当地夜晚温度数组
const localNightTemp = computed(() => localForecast.value.map(item => Number(item?.nighttemp || 0)));

// 搜索城市预测天气
const searchForecast = computed(() => weatherStore.forecastSearchCity || []);
// 搜索城市白昼温度数组
const searchDayTemp = computed(() => searchForecast.value.map(item => Number(item?.daytemp || 0)));
// 搜索城市夜晚温度数组
const searchNightTemp = computed(() => searchForecast.value.map(item => Number(item?.nighttemp || 0)));

// 获取路由信息
import {useRoute} from 'vue-router';
const route = useRoute(); 

// const weatherList = ref([]); 
// const option = ref({}); 

// 如果路由是 /weather 就图表渲染当地城市预测天气
const weatherList = computed(() => { // 天气数据列表
  return route.path === '/weather' ? localForecast.value : searchForecast.value
})
const option = computed(() => { // 图表配置项
  return route.path === '/weather'
    ? renderOption(localDayTemp.value, localNightTemp.value)
    : renderOption(searchDayTemp.value, searchNightTemp.value)
})

// 周几渲染逻辑
const weekMap = {
  1: '周一',
  2: '周二',
  3: '周三',
  4: '周四',
  5: '周五',
  6: '周六',
  7: '周日'
}
function getWeekLabel(index, weekNum) {  
  if (index === 0) return '今天'
  if (index === 1) return '明天'
  return weekMap[weekNum] || ''
}

// 渲染图表配置项
function renderOption (dayTemp, nightTemp) { 
  return {  //配置项
    xAxis: {
      type: 'category',
      show: false
    },
    yAxis: {
      type: 'value',
      show: false
    },
    grid: {
      top: 20,
      right: 0,
      bottom: 0,
      left: 0,
    },
    series: [
      {
        data: dayTemp,
        type: 'line',
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          textBorderColor: 'transparent',
          formatter: function(params) {
            return `白${params.value}℃`;  
          },
        },
      },
      {
        data: nightTemp,
        type: 'line',
        label: {
          show: true,
          position: 'bottom',
          color: '#fff',
          textBorderColor: 'transparent',
          formatter: function(params) {
            return `晚${params.value}℃`;  
          },
        }
      }
    ]
  }
}

</script>

<style scoped>
.bg-weather-secondary {
  /* width: 100%; */
  background-color: #004e71;
  padding: 2.5rem 3rem 0rem;
  margin-top: 0.5rem;
}
.bg-weather-secondary .weather {
  display: flex;
  gap: 1.5rem;
  .item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
}
.chart-box {
  position: relative;
  width: 100%;
  height: 10rem;
  margin-top: 2.5rem;
}
.chart {
  height: 10rem;
  /* width: 640px; */
  width: 100%;
  padding: 0px;
  margin: 0px;
  user-select: none;
  border-width: 0px;
  cursor: default;
}
</style>
